<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../node_modules/react/umd/react.development.js'></script>
    <script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <script src='../node_modules/prop-types/prop-types.js'></script>
    <style>
        .done {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id='root'></div>

    <script type="text/babel">

        class TodoList extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    todoList: [
                        { name: "抽中华", done: false },
                        { name: "喝剑南春", done: false },
                        { name: "烫杀马特", done: true },
                    ],
                }
            }

            addTodoItem = (userInput) => {
                this.setState({
                    todoList: [
                        { name: userInput, done: false },
                        ...this.state.todoList
                    ]
                })
            }

            switchTodoitemState = (index) => {
                this.setState({
                    todoList: this.state.todoList.map(
                        (item, i) => (
                            i !== index ? item : { ...item, done: !item.done }
                        )
                    )
                })
            }

            getTodoitemClassName = (index) => {
                return this.state.todoList[index].done ? "done" : ""
            }

            render() {
                return (
                    <div>
                        <h3>TodoList</h3>
                        <DataPicker onUserInput={this.addTodoItem} />
                        <hr />
                        <DataLister
                            list={this.state.todoList}
                            onItemClick={this.switchTodoitemState}
                            getClassName={this.getTodoitemClassName}
                        />
                    </div>
                )
            }
        }

        class DataPicker extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    userInput: "骚年请输入你的闷响..."
                }
            }

            static propTypes = {
                // onUserInput 函数类型 必传
                onUserInput: PropTypes.func.isRequired,
            }

            onUserInputChange = (e) => {
                this.setState({
                    userInput: e.target.value
                })
            }

            onSubmit = (e) => {
                /* 将用户的输入告知父组件，由父组件自行定夺如何处置之 */
                this.props.onUserInput(this.state.userInput)
                // 清空用户输入
                this.setState({
                    userInput: ""
                })
            }

            render() {
                return (
                    <div>
                        <h3>DataPicker: {this.state.userInput}</h3>
                        <input type="text" value={this.state.userInput} onChange={this.onUserInputChange} />
                        <button onClick={this.onSubmit}>提交</button>
                    </div>
                )
            }
        }

        class DataLister extends React.Component {

            static propTypes = {
                // list类型 对象数组 必传
                list: PropTypes.arrayOf(PropTypes.object).isRequired,

                // 函数类型 响应用户点击Item
                onItemClick: PropTypes.func,

                // 函数类型 根据具体的item返回其渲染的class
                getClassName: PropTypes.func,
            }

            onItemClick = (index, e) => {
                /* 告诉父组件第几个item被点击了 具体如何处置由父元素自行决定 */
                this.props.onItemClick(index)
            }

            render() {
                return (
                    <div>
                        <h3>DataLister</h3>
                        <ul>{
                            this.props.list.map(
                                (item, index) => (
                                    <li
                                        key={index + item.name}
                                        className={this.props.getClassName(index)}
                                        onClick={() => {
                                            this.onItemClick(index)
                                        }}>
                                        {item.name}
                                    </li>
                                )
                            )
                        }</ul>
                    </div>
                )
            }
        }

        ReactDOM.render(
            <TodoList />,
            document.querySelector("#root")
        )
    </script>
</body>

</html>